<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
            ￥ {{info.todayBillAmount||0}}
          </div>
          <div class="card-txt">今日订单金额</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
            {{info.todayBillCount||0}}
          </div>
          <div class="card-txt">今日成功订单</div>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="isAdmin()">
        <el-card shadow="always">
          <div class="card-num">
            {{info.newUserCount||0}}
          </div>
          <div class="card-txt">今日新增会员</div>
        </el-card>
      </el-col>

    </el-row>
      <br>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
            ￥ {{info.yesterdayBillAmount||0}}
          </div>

          <div class="card-txt">昨日订单金额</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
            {{info.yesterdayBillCount||0}}
          </div>
          <div class="card-txt">昨日成功订单</div>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="isAdmin()">
        <el-card shadow="always">
          <div class="card-num">
            {{info.yesterdayUserCount||0}}
          </div>
          <div class="card-txt">昨日新增会员</div>
        </el-card>
      </el-col>
    </el-row>
    <div class="todolist">
      <el-row>
        <el-col :span="12">
          <div class="todo-title">
            待处理事务
          </div>
          <div class="dotolist-content">
            <el-row>
              <el-col :span="7">待发货订单</el-col>
              <el-col :span="5">{{info.waitSendBillCount}}条</el-col>
              <el-col :span="5">会员提现</el-col>
              <el-col :span="7">0条</el-col>
            </el-row>
            <el-row>
              <el-col :span="7">站内信</el-col>
              <el-col :span="5">0条</el-col>
              <el-col :span="5">商品咨询</el-col>
              <el-col :span="7">{{info.goodsConsultCount}}条</el-col>
            </el-row>
            <el-row>
              <el-col :span="7">已达到警戒库存商品</el-col>
              <el-col :span="17">0条</el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" v-if="isAdmin()">
          <div class="todo-title">
            商城信息统计
          </div>
          <div class="dotolist-content">
            <el-row>
              <el-col :span="12">
                <div class="todo-block">
                  <div class="todo-num">
                    {{info.userCount||0}}个
                  </div>
                  <div class="todo-txt">
                    会员总数
                  </div>
                </div>

              </el-col>
              <el-col :span="12">
                <div class="todo-block">
                  <div class="todo-num">
                    {{info.goodsCount||0}}个
                  </div>
                  <div class="todo-txt">
                    商品总数
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <!-- <el-col :span="12">
                        <div class="todo-block">
                    <div class="todo-num">
                      ￥12.00
                    </div>
                    <div class="todo-txt">
                      预付款总额
                    </div>
                        </div>
                  </el-col> -->
              <!-- <el-col :span="12">
                        <div class="todo-block">
                    <div class="todo-num">
                      ￥12.11
                    </div>
                    <div class="todo-txt">
                      近30天订单金额
                    </div>
                        </div>
                  </el-col>  -->
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" v-if="isAdmin()">
          <div class="todo-title">
            有效订单统计
          </div>
          <div class="dotolist-content">
            <el-row>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    {{info.todayCount||0}}
                  </div>
                  <div class="todo-txt">
                    今日有效订单数量
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    ￥ {{info.todaySaleAmount||0}}
                  </div>
                  <div class="todo-txt">
                    今日有效订单总额
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    ￥ {{info.todayWxSaleAmount||0}}
                  </div>
                  <div class="todo-txt">
                    今日有效订单微信总额
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    ￥ {{info.todaySalePoints||0}}
                  </div>
                  <div class="todo-txt">
                    今日有效订单积分总额
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      <el-row>
      </el-row>
        <el-col :span="24" v-if="isAdmin()">
          <div class="dotolist-content">
            <el-row>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    {{info.yesterdayCount||0}}
                  </div>
                  <div class="todo-txt">
                    昨日有效订单数量
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    ￥ {{info.yesterdaySaleAmount||0}}
                  </div>
                  <div class="todo-txt">
                    昨日有效订单总额
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    ￥ {{info.yesterdayWxSaleAmount||0}}
                  </div>
                  <div class="todo-txt">
                    昨日有效订单微信总额
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="todo-block">
                  <div class="todo-num">
                    ￥ {{info.yesterdaySalePoints||0}}
                  </div>
                  <div class="todo-txt">
                    昨日有效订单积分总额
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="short-cuts">
      <div class="short-cuts-title">
        运营快捷入口
      </div>
      <div class="short-cuts-content">
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          添加商品
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          订单列表
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          会员管理
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          会员预存款
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          网站流量
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          满额优惠
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          经典团购
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          限时抢购
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          零售统计
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
// var echarts = require("echarts");

export default {
  directives: {
    waves
  },
  mounted () {
    // this.$post('/admin/admin/desktop_data').then(data => {
    //   this.info = data
    // })
  },
  data () {
    return {
      info: {}
    }
  },
  methods: {}
}

</script>
<style>
  .card-num {
    font-size: 24px;
    padding-bottom: 10px;
  }

  .card-txt {
    font-size: 14px;
  }

  .short-cut {
    text-align: center;
    font-size: 14px;
    margin-bottom: 15px;
    float: left;
    margin-right: 30px;
  }

  .short-cuts-content {
    overflow: hidden;
    box-sizing: border-box;
  }

  .short-icon {
    display: block;
    font-size: 30px;
    margin-bottom: 5px;
  }

  .short-cuts-title {
    padding-bottom: 30px;
  }

  .todolist {
    padding: 50px 0 10px 0;
  }

  .todolist .el-row {
    padding-bottom: 15px;
  }

  .todo-title {
    padding-bottom: 30px;
    font-size: 18px;
    font-weight: bold;
  }

  .short-cuts-title {
    font-size: 18px;
    font-weight: bold;
  }

  .todo-block {
    text-align: center;
    display: inline-block;
    width: 120px;
    margin-bottom: 20px;
  }

  .todo-txt {
    font-size: 14px;
  }

  .todo-block .todo-num {
    font-size: 18px;
    padding-bottom: 10px;
  }

</style>
